<template>
  <!-- bar =》 
      确定动态的属性

       1：id => echarts => 容器
       2：自己定义一个动态的属性，echartsBar =2
       3:  tooltip 布尔值
    -->
  <div
    class="bar"
    :id="echartsid"
    :style="{ height: 400 + 'px', width: 100 + '%' }"
  ></div>
</template>

<script setup  lang="ts">
import * as echarts from "echarts";
import { onMounted, watch, ref } from "vue";
let echartDom: any = ref("");
// 接收一个父组件给的数据
let props: any = defineProps({
  echartsList: {
    //异步数据
    type: Object,
  },
  echartsid: {
    // 默认的数据
    type: String,
    default: "bar",
  },
  echartsBar:{  //默认的数据
    type: String||Number,
    default:1
  },
  tooltip:{//默认的数据
    type:Boolean,
    default:false
  }
});
watch(
  () => props,
  (newVal: any) => {
    console.log(newVal.echartsList, 11111111);
    //创建 画 图表
    getEchartT(newVal.echartsList);
  },
  {
    deep: true,
  }
);

//配置图表
const getEchartT = (obj: any) => {
    // console.log(obj,55555555);
    
  // var myChart = echarts.init(document.getElementById('bar'));
  // console.log(props.echartsList.xdata,'父组件给子组件的，异步数据');

  //echart 属性
  let option = {
    tooltip: { // 提示 item
        trigger: props.tooltip?'item':'',   
  },
    xAxis: {
      //x
      type: "category",
      data: obj.xdata,
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
        },
      },
    },
    series: [
      {
        data: obj.list,
        type: "bar",
        // showBackground: true,
        // backgroundStyle: {
        //   color: "blue",
        // },
      },
      props.echartsBar==2?getBar2(obj.list1):''
    //   第二条数据 =》
    //   {
    //   name: '2012',
    //   type: 'bar',
    //   data: [20,100,200,300,500,800]
    // }
    ],
  };

  echartDom.value.setOption(option);
};

//定义一个获取到 数据方法

const  getBar2 = (list:any)=>{
   return  {
      name: '2012',
      type: 'bar',
      data: list
    }
}

onMounted(() => {
  //组件的生命周期 =》组件创建执行一次
  let dom = document.getElementById(props.echartsid)
   if(dom){
    echartDom.value = echarts.init(dom);
   }
});

// 总结  项目中的echarts   二次封装

//  1创建一个单独的文件， 初始化一项echart 实例对象
//  2因为我们在工作中，这个可视化图表都是动态的数据，我有进行封装，通过watch  获取到异步数据
//  在触发echarts 配置图表的方法（
/*
    1）：因为我写项目都是组件化开发，方便后期的复用和维护， =>组件渲染关系，和数据获取的顺序
     
组件渲染关系 =》先渲染父子关系， 如果这个子组件的数据是异步，我需要在逻辑 获取到这个异步数据，通过watch

  =》watch  时时更新  echarts 图表配置方法

**/
// ）

// 3 怎么处理样式 =》ui给你的可视化图表，
//1先到  echarts 图表中 案例 =》（80%）

// 2 百度查找
</script>

<style>
</style>